<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>1.布局关</title>
	<link rel="stylesheet" href="boot/css/bootstrap.min.css">
	<style type="text/css">
		body {
			text-align: center;
		}
		.one{font-size:40px}
		.layout{margin: 0 auto;width: 100%;}		
		.news{width: 25%;float: left;}		
		.news_item{
			width: 95%;margin: 0 auto;
			border: 2px solid #e9e9e9;
		    border-radius: 3px;
		    padding: 50px 15px 48px;
		    height: 300px;overflow: hidden;
		}
		.news_item--title {    font-size: 20px;}		
		.news_item--text {
		    font-size: 16px;
		    color: #969696;
		    line-height: 23px;
		}
		.icon{font-size: 80px;color:#19a7f0}

	
		@media(max-width: 992px) and (min-width: 768px) {		
			.news{width: 50%}
		}
		/*手机端*/
		@media(max-width: 768px){
		
			.news{width:100%}
			.news_item--text{display: none}
		
		}



	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<h4 class="one">响应式应用第一关： <span>布局关</span></h4><br>
	<div class="layout" id="layout">
		<div class="news">
			<div class="news_item">			
				
				<span class="glyphicon glyphicon-time icon" ></span>
				<br>
				<h1  class="news_item--title">要用绿水青山定调发展的底色</h1>
				<p class="news_item--text">三江源国家公园体制试点建设以来，环境保护合力集聚形成，绿色生活方式日益普及。</p>		
			
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-screenshot icon" ></span>
				<br>
				<h1  class="news_item--title">一带一路建设走向高质量发展</h1>
				<p class="news_item--text">来自80多个国家和地区的政府、企业和有关国际组织的近900名中外代表齐聚北京，参加首届企业家大会。</p>
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-refresh icon" ></span>
				<br>
				<h1 class="news_item--title">奋斗在脱贫攻坚一线的女汉子</h1>
				<p class="news_item--text">脱贫攻坚工作是一项复杂的系统工程，甘当为贫困户拜托困难，筑建幸福路上的一粒沙。</p>
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-thumbs-up icon" ></span>
				<br>
				<h1  class="news_item--title">奋斗，是对祖国最深情的告白</h1>
				<p class="news_item--text">唯有奋斗，才能让险阻变通途。无论顺境逆境，无论阳光风雨，我们永远与祖国在一起！</p>
			</div>
		</div>
	</div>
</body>
</html>